<template>
    <div class="todoBody">
      <MyHeader :addItem="addItem" />
      <MyList :todoList="todoList" :deleteItem="deleteItem" :changeIsOk="changeIsOk" />
      <MyFooter :todoList="todoList" :clearComplatedTask="clearComplatedTask" :controlBoxIsItem="controlBoxIsItem" />
      
      
    </div>
</template>
<script>
    import MyHeader from './components/MyHeader'
    import MyList from './components/MyList'
    import MyFooter from './components/MyFooter'
    import {nanoid} from 'nanoid'

    export default {
        name:'App',
        components:{
          MyHeader,
          MyList,
          MyFooter
        },
        data(){
            return{
                todoList:localStorage.getItem('todoList')?JSON.parse(localStorage.getItem('todoList')):[],
                // [
                //     {id:"001",title:"吃饭",IsOk:true},
                //     {id:"002",title:"打篮球",IsOk:false},
                //     {id:"003",title:"睡觉",IsOk:true},
                // ]
            }
        },
        methods: {
            //添加一个内容
            addItem(value){
                this.todoList.unshift({id:nanoid(),title:value,IsOk:false})
                localStorage.setItem('todoList',JSON.stringify(this.todoList))
            },
            //删除一个内容
            deleteItem(id){
                //返回一个数组 覆盖原先的数组
                this.todoList = this.todoList.filter((item)=>{
                    return item.id !== id
                })
            },
            //通过Item修改当前todoList下的集合中 isok的值
            changeIsOk(id,status){
                this.todoList.forEach((item)=>{
                    if(item.id === id){ item.IsOk = !status}
                })
            },

            //清楚已完成的任务
            clearComplatedTask(){
                this.todoList = this.todoList.filter((item)=>{
                    return !item.IsOk
                })
            },

            //控制全选
            controlBoxIsItem(status){
                this.todoList.forEach((item)=>{
                    item.IsOk = status
                })
            }


        },
    }
</script>
<style>
    /* ##base */
    .todoBody{
        width: 800px;
        height: auto;
        border: 1px solid #d3d3d3;
        margin:0 auto;
        padding-top: 7px;
    }


    

    

   

    
</style>